<template>
	<view>
		<scroll-view scroll-x="true" @scroll="scroll" class="scroll-v">
			<view class="menu_list">
				<view class="menu_item" v-for="(item,index) in list" :key='item.title' @click="handNavTo(item)">
					<image v-if="item.imgUrl!=0" :src='require(`@/static/img/menu${item.imgUrl}.png`)' mode=""
						class="icon"></image>
					<u-icon name='plus-circle-fill' v-else size='100' color="#E7E7E7"></u-icon>
					<view class="title">
						{{item.title}}
					</view>
				</view>

			</view>
		</scroll-view>
		<view class="line_prog">
			<u-line-progress height='8' :percent="percent" active-color='#FF365d'>
				<view class="" slot='default'>
				</view>
			</u-line-progress>
		</view>
	</view>
</template>

<script>
	import {
		GetPercent
	} from '@/utils/utils.js'
	export default {
		name: "ZY-ScrollMenu",
		data() {
			return {
				percent: 0,
				list: [{
						imgUrl: "_1",
						title: '在线课堂',
					},
					{
						imgUrl: '_2',
						title: 'K歌',
					},
					{
						imgUrl: '_3',
						title: '家居养老',
					},
					{
						imgUrl: '_4',
						title: '爱车养护',
					},
					{
						imgUrl: 0,
						title: '添加',
					},
				]
			};
		},
		methods: {
			handNavTo(item) {
				if (item.imgUrl == 0) {
					uni.showToast({
						title: '敬请期待!!',
						icon: 'none'
					})
				}
			},
			scroll(e) {


				const {
					scrollWidth,
					scrollLeft
				} = e.detail
				const scl = (Math.round(scrollLeft * 100) / 100) + 375
				if (scl > scrollWidth) {
					this.percent = 100
				} else {
					this.percent = GetPercent(scl, scrollWidth)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.line_prog {
		width: 100rpx;
		margin: 0 auto;
		text-align: center;
		// display: flex;
		// justify-content: center;
		// margin-top: 20rpx;
	}

	/deep/.uni-scroll-view ::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		background: transparent;
	}

	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		background: transparent;
	}

	.menu_list {
		display: flex;
		padding: 0 20rpx;
		margin-top: 30rpx;

		.menu_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			// margin-right: 58rpx;
			width: 20%;

			.title {
				color: #000000;
				font-size: 24rpx;
				white-space: nowrap;
			}

			.icon {
				border-radius: 50%;
				// background-color: #FF365D;
				width: 90rpx;
				height: 90rpx;
				margin-bottom: 13rpx;
			}
		}
	}
</style>
